<template>
  <div class="factory-overview-container">
    <dv-border-box-8 class="overview-box">
      <div class="panel-header">
        <i class="el-icon-s-home"></i>
        智造云枢概览
      </div>
      
      <!-- 上方数据卡片行 -->
      <div class="overview-cards">
        <div class="overview-card" v-for="(card, index) in overviewCards" :key="index">
          <div class="card-icon" :style="{ backgroundColor: card.bgColor }">
            <i :class="card.icon"></i>
          </div>
          <div class="card-data">
            <div class="card-value">{{ card.value }}</div>
            <div class="card-label">{{ card.label }}</div>
          </div>
        </div>
      </div>
      
      <!-- 生产状态进度 -->
      <div class="production-status">
        <div class="status-header">
          <span>生产计划完成情况</span>
          <span>{{ productionRate }}%</span>
        </div>
        <el-progress 
          :percentage="productionRate" 
          :stroke-width="12" 
          :show-text="false"
          :color="progressColor">
        </el-progress>
        <div class="status-detail">
          <span>计划: {{ productionTarget }}</span>
          <span>完成: {{ productionComplete }}</span>
        </div>
      </div>
    </dv-border-box-8>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 数据统计
const deviceTotal = ref(48)
const deviceRunning = ref(42)
const workOrders = ref(12)
const alertCount = ref(3)

const productionTarget = ref(1500)
const productionComplete = ref(1150)

// 计算生产完成率
const productionRate = computed(() => {
  return Math.round((productionComplete.value / productionTarget.value) * 100)
})

// 进度条颜色
const progressColor = computed(() => {
  const rate = productionRate.value
  if (rate < 50) return '#f56c6c'
  if (rate < 80) return '#e6a23c'
  return '#67c23a'
})

// 概览卡片数据
const overviewCards = computed(() => [
  {
    label: '设备总数',
    value: deviceTotal.value,
    icon: 'el-icon-cpu',
    bgColor: 'rgba(64, 158, 255, 0.1)'
  },
  {
    label: '运行设备',
    value: deviceRunning.value,
    icon: 'el-icon-open',
    bgColor: 'rgba(103, 194, 58, 0.1)'
  },
  {
    label: '生产工单',
    value: workOrders.value,
    icon: 'el-icon-document',
    bgColor: 'rgba(230, 162, 60, 0.1)'
  },
  {
    label: '异常警报',
    value: alertCount.value,
    icon: 'el-icon-warning',
    bgColor: 'rgba(245, 108, 108, 0.1)'
  }
])

// 从API获取数据
onMounted(async () => {
  // 实际项目中这里会调用API获取数据
  // 示例代码：
  // const response = await fetch('/api/factory/overview')
  // const data = await response.json()
  // deviceTotal.value = data.deviceTotal
  // deviceRunning.value = data.deviceRunning
  // workOrders.value = data.workOrders
  // alertCount.value = data.alertCount
  // productionTarget.value = data.productionTarget
  // productionComplete.value = data.productionComplete
})
</script>

<style scoped>
.factory-overview-container {
  width: 100%;
  height: 100%;
}

.overview-box {
  width: 100%;
  height: 100%;
  padding: 15px;
}

.panel-header {
  font-size: 16px;
  color: #29b6ff;
  margin-bottom: 20px;
}

.overview-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.overview-card {
  background-color: rgba(24, 44, 78, 0.5);
  border-radius: 4px;
  padding: 15px;
  display: flex;
  align-items: center;
  width: 23%;
  height: 90px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin-right: 15px;
  color: #fff;
}

.card-data {
  display: flex;
  flex-direction: column;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.card-label {
  font-size: 14px;
  color: #b9e0ff;
}

.production-status {
  background-color: rgba(24, 44, 78, 0.5);
  border-radius: 4px;
  padding: 15px;
  margin-top: 10px;
}

.status-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #fff;
}

.status-detail {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #b9e0ff;
  font-size: 12px;
}

:deep(.el-progress-bar__outer) {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-progress-bar__inner) {
  border-radius: 10px;
  transition: all 0.6s ease;
}
</style>